{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "import matplotlib.pyplot as plt\n",
    "%matplotlib inline"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "url = \"https://raw.githubusercontent.com/dwdii/IS608-VizAnalytics/master/FinalProject/Data/CO-EST2014-alldata.csv\"\n",
    "pop2014 =pd.read_csv(url,encoding='latin-1',dtype={'STATE': 'str', 'COUNTY': 'str'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "pop2014_by_state = pop2014[pop2014.SUMLEV == 40]\n",
    "states = pop2014_by_state[['STNAME','POPESTIMATE2011', 'POPESTIMATE2012', 'POPESTIMATE2013','POPESTIMATE2014']] "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "    paths: {\n",
       "        d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min'\n",
       "    }\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "    paths: {\n",
    "        d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min'\n",
    "    }\n",
    "});\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "\n",
       ".bar {\n",
       "   fill: steelblue;\n",
       "}\n",
       "\n",
       ".bar:hover{\n",
       "   fill: brown;\n",
       "}\n",
       "\n",
       ".axis {\n",
       "   font: 10px sans-serif;\n",
       "}\n",
       "\n",
       ".axis path,\n",
       "\n",
       ".axis line {\n",
       "   fill: none;\n",
       "   stroke: #000;\n",
       "}\n",
       "\n",
       ".x.axis path {\n",
       "   display: none;\n",
       "}\n",
       "\n",
       "</style>\n",
       "<div id=\"chart_d3\" />\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from IPython.core.display import display, Javascript, HTML\n",
    "\n",
    "display(HTML(\"\"\"\n",
    "<style>\n",
    "\n",
    ".bar {\n",
    "   fill: steelblue;\n",
    "}\n",
    "\n",
    ".bar:hover{\n",
    "   fill: brown;\n",
    "}\n",
    "\n",
    ".axis {\n",
    "   font: 10px sans-serif;\n",
    "}\n",
    "\n",
    ".axis path,\n",
    "\n",
    ".axis line {\n",
    "   fill: none;\n",
    "   stroke: #000;\n",
    "}\n",
    "\n",
    ".x.axis path {\n",
    "   display: none;\n",
    "}\n",
    "\n",
    "</style>\n",
    "<div id=\"chart_d3\" />\n",
    "\"\"\"))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import jinja2\n",
    "\n",
    "myTemplate = jinja2.Template(\"\"\"\n",
    "\n",
    "require([\"d3\"], function(d3){\n",
    "\n",
    "   var data = []\n",
    "   \n",
    "   {% for row in data %}\n",
    "   data.push({ 'state': '{{ row[1] }}', 'population': {{ row[5] }}  });\n",
    "   {% endfor %}\n",
    "\n",
    "d3.select(\"#chart_d3 svg\").remove()\n",
    "\n",
    "    var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
    "        width = 800 - margin.left - margin.right,\n",
    "        height = 400 - margin.top - margin.bottom;\n",
    "\n",
    "    var x = d3.scale.ordinal()\n",
    "        .rangeRoundBands([0, width], .25);\n",
    "\n",
    "    var y = d3.scale.linear()\n",
    "        .range([height, 0]);\n",
    "\n",
    "    var xAxis = d3.svg.axis()\n",
    "        .scale(x)\n",
    "        .orient(\"bottom\");\n",
    "\n",
    "    var yAxis = d3.svg.axis()\n",
    "        .scale(y)\n",
    "        .orient(\"left\")\n",
    "        .ticks(10)\n",
    "        .tickFormat(d3.format('.1s'));\n",
    "        \n",
    "    var svg = d3.select(\"#chart_d3\").append(\"svg\")\n",
    "        .attr(\"width\", width + margin.left + margin.right)\n",
    "        .attr(\"height\", height + margin.top + margin.bottom)\n",
    "        .append(\"g\")\n",
    "        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
    "\n",
    "    x.domain(data.map(function(d) { return d.state; }));\n",
    "    y.domain([0, d3.max(data, function(d) { return d.population; })]);\n",
    "\n",
    "    svg.append(\"g\")\n",
    "        .attr(\"class\", \"x axis\")\n",
    "        .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
    "        .call(xAxis);\n",
    "\n",
    "    svg.append(\"g\")\n",
    "        .attr(\"class\", \"y axis\")\n",
    "        .call(yAxis)\n",
    "        .append(\"text\")\n",
    "        .attr(\"transform\", \"rotate(-90)\")\n",
    "        .attr(\"y\", 6)\n",
    "        .attr(\"dy\", \".71em\")\n",
    "        .style(\"text-anchor\", \"end\")\n",
    "        .text(\"Population\");\n",
    "\n",
    "    svg.selectAll(\".bar\")\n",
    "        .data(data)\n",
    "        .enter().append(\"rect\")\n",
    "        .attr(\"class\", \"bar\")\n",
    "        .attr(\"x\", function(d) { return x(d.state); })\n",
    "        .attr(\"width\", x.rangeBand())\n",
    "        .attr(\"y\", function(d) { return y(d.population); })\n",
    "        .attr(\"height\", function(d) { return height - y(d.population); });\n",
    "});\n",
    "\"\"\");\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "\n",
       "require([\"d3\"], function(d3){\n",
       "\n",
       "   var data = []\n",
       "   \n",
       "   \n",
       "   data.push({ 'state': 'California', 'population': 38802500  });\n",
       "   \n",
       "   data.push({ 'state': 'Texas', 'population': 26956958  });\n",
       "   \n",
       "   data.push({ 'state': 'New York', 'population': 19746227  });\n",
       "   \n",
       "   data.push({ 'state': 'Florida', 'population': 19893297  });\n",
       "   \n",
       "   data.push({ 'state': 'Illinois', 'population': 12880580  });\n",
       "   \n",
       "   data.push({ 'state': 'Pennsylvania', 'population': 12787209  });\n",
       "   \n",
       "   data.push({ 'state': 'Ohio', 'population': 11594163  });\n",
       "   \n",
       "   data.push({ 'state': 'Georgia', 'population': 10097343  });\n",
       "   \n",
       "   data.push({ 'state': 'Michigan', 'population': 9909877  });\n",
       "   \n",
       "   data.push({ 'state': 'North Carolina', 'population': 9943964  });\n",
       "   \n",
       "\n",
       "d3.select(\"#chart_d3 svg\").remove()\n",
       "\n",
       "    var margin = {top: 20, right: 20, bottom: 30, left: 40},\n",
       "        width = 800 - margin.left - margin.right,\n",
       "        height = 400 - margin.top - margin.bottom;\n",
       "\n",
       "    var x = d3.scale.ordinal()\n",
       "        .rangeRoundBands([0, width], .25);\n",
       "\n",
       "    var y = d3.scale.linear()\n",
       "        .range([height, 0]);\n",
       "\n",
       "    var xAxis = d3.svg.axis()\n",
       "        .scale(x)\n",
       "        .orient(\"bottom\");\n",
       "\n",
       "    var yAxis = d3.svg.axis()\n",
       "        .scale(y)\n",
       "        .orient(\"left\")\n",
       "        .ticks(10)\n",
       "        .tickFormat(d3.format('.1s'));\n",
       "        \n",
       "    var svg = d3.select(\"#chart_d3\").append(\"svg\")\n",
       "        .attr(\"width\", width + margin.left + margin.right)\n",
       "        .attr(\"height\", height + margin.top + margin.bottom)\n",
       "        .append(\"g\")\n",
       "        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n",
       "\n",
       "    x.domain(data.map(function(d) { return d.state; }));\n",
       "    y.domain([0, d3.max(data, function(d) { return d.population; })]);\n",
       "\n",
       "    svg.append(\"g\")\n",
       "        .attr(\"class\", \"x axis\")\n",
       "        .attr(\"transform\", \"translate(0,\" + height + \")\")\n",
       "        .call(xAxis);\n",
       "\n",
       "    svg.append(\"g\")\n",
       "        .attr(\"class\", \"y axis\")\n",
       "        .call(yAxis)\n",
       "        .append(\"text\")\n",
       "        .attr(\"transform\", \"rotate(-90)\")\n",
       "        .attr(\"y\", 6)\n",
       "        .attr(\"dy\", \".71em\")\n",
       "        .style(\"text-anchor\", \"end\")\n",
       "        .text(\"Population\");\n",
       "\n",
       "    svg.selectAll(\".bar\")\n",
       "        .data(data)\n",
       "        .enter().append(\"rect\")\n",
       "        .attr(\"class\", \"bar\")\n",
       "        .attr(\"x\", function(d) { return x(d.state); })\n",
       "        .attr(\"width\", x.rangeBand())\n",
       "        .attr(\"y\", function(d) { return y(d.population); })\n",
       "        .attr(\"height\", function(d) { return height - y(d.population); });\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display(Javascript(myTemplate.render(\n",
    "    data=states.sort_values(['POPESTIMATE2012'], ascending=False)[:10].itertuples()        \n",
    ")))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
